<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #linkIndex {
        padding: 0px 0px 30px;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }

    .group-item-operation {
        flex: 1;
    }

    .delete-button,
    .edit-button {
        cursor: pointer;
        margin-right: 14px;
    }

    .edit-button {
        color: #7438D5;
    }

    .delete-button {
        color: #FF5959;
    }

    .common-button-container {
        justify-content: space-between;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="linkIndex" v-cloak>
    <div class="common-tabs-container">
        <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane v-for="(group,gindex) in linkData" :label="group.group?group.group:'其它'"
                :name="group.group?group.group:'其它'">
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="common-button-container">
        <div class="display-flex">
            <div class="common-refresh-button" @click="getData">
                <i class="el-icon-refresh"></i>
            </div>
            <div class="common-button common-add-button" @click="operation('add',null)">
                <i class="el-icon-plus"></i>
                <span>新建</span>
            </div>
        </div>
        {if condition = "$auth->check('groupon/link/recyclebin')"}
        <div class="common-button common-recycle-button" @click="operation('recyclebin')">
            <i class="fa fa-recycle"></i>
            回收站
        </div>
        {/if}
    </div>
    <div class="common-table-container" v-if="linkData[activeIndex]">
        <el-table ref="multipleTable" :data="linkData[activeIndex].children" border>
            <el-table-column label="ID" min-width="60" prop="id" align="center">
            </el-table-column>
            <el-table-column label="名称" min-width="120">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{scope.row.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="路径" min-width="300">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{scope.row.path}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="所属分组" min-width="100" prop="group" align="center">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{scope.row.group?scope.row.group:'其它'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="添加时间" width="160" align="center">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="usenum" label="更新时间" width="160" align="center">
                <template slot-scope="scope">
                    <div class="group-item-time">
                        {{moment(scope.row.updatetime*1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="110">
                <template slot-scope="scope">
                    <div class="group-item-operation display-flex">
                        <div class="edit-button" @click="operation('edit',scope.row.id)">编辑</div>
                        <div class="delete-button" @click="operation('delete',scope.row.id)">删除</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-if="isData" class="display-flex-c" style="height: 200px;">
        暂无数据
    </div>
</div>